{% extends 'layout/manage.html' %}

{% block css %}
    <style>
        .c1 {
            height: 100%;
            border: 1px solid #dddddd;
            width: 100%;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="col-md-8">
        图片
        <span style="display: none" id="user">{{ request.tracer.user }}</span>
    </div>
    <div class="col-md-4">
        <div class="c1" id="message"></div>
        <div style="margin: 50px">
            <input type="text" placeholder="输入" id="txt">
            <input type="button" value="发送" onclick="sendMessage()">
            <input type="button" value="断开" onclick="closeConn()" id="close">
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        var socket = new WebSocket("ws://127.0.0.1:8000/room/{{ group }}/");

        {#socket.onopen = function (event) {#}
        {#    let tag = document.createElement('div');#}
        {#    console.log(document.getElementById("user"));#}
        {#    tag.innerText = document.getElementById("user").innerText + ":[连接成功]";#}
        {#    document.getElementById("message").appendChild(tag);#}
        {##}

        socket.onmessage = function (event) {
            let tag = document.createElement('div');
            tag.innerText = document.getElementById("user").innerText + ": " + event.data;
            document.getElementById("message").appendChild(tag);
        }

        {#socket.onclose = function (event) {#}
        {#    let tag = document.createElement("div");#}
        {#    tag.innerText = document.getElementById("user").innerText + ":[断开连接]";#}
        {#    document.getElementById("message").appendChild(tag);#}
        {##}

        function sendMessage() {
            let tag = document.getElementById("txt");
            socket.send(tag.value);
        }

        function closeConn() {
            let tag = document.createElement("div");
            tag.innerText = document.getElementById("user").innerText + ":[断开连接]";
            document.getElementById("message").appendChild(tag);
            socket.close();
        }
    </script>
{% endblock %}